<dom-module id="grid-row-details-demos">
  <template>
    <style include="vaadin-component-demo-shared-styles">
      :host {
        display: block;
      }
    </style>

    <h3>Row Details</h3>
    <p>
      Set a <code>rowDetailsRenderer</code> to enable row details feature.
      Adding items to <code>grid.detailsOpenedItems</code> array or invoking <code>openItemDetails(item)</code>
      will open details for the corresponding row.
    </p>

    <vaadin-demo-snippet id="grid-row-details-demos-row-details" when-defined="vaadin-grid">
      <template preserve-content>
        <style>
          .details {
            display: flex;
            font-size: 20px;
          }

          img {
            width: 80px;
            height: 80px;
            margin: 20px;
          }
        </style>

        <vaadin-grid aria-label="Toggling and Rendering Details Using JavaScript Example" size="200">
          <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
          <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
          <vaadin-grid-column id="details"></vaadin-grid-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-row-details-demos-row-details', function(document) {
            const grid = document.querySelector('vaadin-grid');
            grid.items = Vaadin.GridDemo.users;

            grid.rowDetailsRenderer = function(root, grid, model) {
              if (!root.firstElementChild) {
                root.innerHTML =
                '<div class="details">' +
                '<img><p><span></span><br>' +
                '<small></small></p>' +
                '</div>';
              }
              root.firstElementChild.querySelector('img').src = model.item.picture.large;
              root.firstElementChild.querySelector('span').textContent = 'Hi! My name is ' + model.item.name.first + '!';
              root.firstElementChild.querySelector('small').textContent = model.item.email;

              // If the bounds of the image weren't known/specified beforehand, grid would need to
              // be notified of an asynchronous size change once the image gets loaded.
              // root.firstElementChild.querySelector('img').onload = () => {
              //   grid.notifyResize();
              // };
            };

            const detailsToggleColumn = document.querySelector('#details');
            detailsToggleColumn.renderer = function(root, column, model) {
              if (!root.firstElementChild) {
                root.innerHTML = '<vaadin-checkbox>Show Details</vaadin-checkbox>';
                root.firstElementChild.addEventListener('checked-changed', function(e) {
                  if (e.detail.value) {
                    grid.openItemDetails(root.item);
                  } else {
                    grid.closeItemDetails(root.item);
                  }
                });
              }
              root.item = model.item;
              root.firstElementChild.checked = grid.detailsOpenedItems.indexOf(root.item) > -1;
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>

    <h3>Row Details with Polymer Template</h3>
    <p>
      Row Details can be enabled by providing a <code>&lt;template class="row-details"&gt;</code>
      and toggling item details by using <code>{{detailsOpened}}</code> template variable,
      <code>detailsOpenedItems</code> property or <code>openItemDetails(item)</code> and
      <code>closeItemDetails(item)</code> methods.
    </p>
    <vaadin-demo-snippet id="grid-row-details-demos-row-details-polymer" when-defined="vaadin-grid">
      <template preserve-content>
        <dom-bind>
          <template>
            <style>
              .details {
                display: flex;
                font-size: 20px;
              }

              img {
                width: 80px;
                height: 80px;
                margin: 20px;
              }
            </style>

            <x-data-provider data-provider="{{dataProvider}}"></x-data-provider>

            <vaadin-grid active-item={{activeItem}} aria-label="Row Details Example" data-provider="[[dataProvider]]" size="200">

              <template class="row-details">
                <div class="details">
                  <img src="[[item.picture.large]]">
                  <p>
                    <span>Hi! My name is [[item.name.first]]!</span><br>
                    <small>[[item.email]]</small>
                  </p>
                </div>
              </template>

              <vaadin-grid-column width="60px" flex-grow="0">
                <template class="header">#</template>
                <template>[[index]]</template>
              </vaadin-grid-column>

              <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
              <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>

              <vaadin-grid-column width="100px">
                <template class="header"></template>
                <template>
                  <vaadin-checkbox aria-label$="Show Details for [[item.name.first]]" checked="{{detailsOpened}}">Show Details</vaadin-checkbox>
                </template>
              </vaadin-grid-column>

            </vaadin-grid>
          </template>
        </dom-bind>
      </template>
    </vaadin-demo-snippet>

  </template>
  <script>
    class GridRowDetailsDemos extends DemoReadyEventEmitter(GridDemo(Polymer.Element)) {
      static get is() {
        return 'grid-row-details-demos';
      }
    }
    customElements.define(GridRowDetailsDemos.is, GridRowDetailsDemos);
  </script>
</dom-module>
